<template>
  <div id="app">
    <transition :name="slideDirect">
      <keep-alive :include="routerConfig.toString()">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <action-sheet v-if="actionSheetConfig.isShow"></action-sheet>
  </div>
</template>
<script>
import routerConfig from "./router/routerConfig";
import ActionSheet from "@/components/action-sheet";

export default {
  name: "App",
  components: {ActionSheet},
  data() {
    return {
      routerConfig,
      slideDirect:"slide-left"
    }
  },
  watch:{
    $route(to,from){
      if (from.meta.index < to.meta.index){
        this.slideDirect = "slide-left";
      }else {
        this.slideDirect = "slide-right";
      }
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

:root {
  font-size: calc(100vw / 375 * 100);
}

body {
  font-size: 16px;
}

@media only screen and (min-width: 769px) {
  :root {
    width: calc(768px / 375 * 100);
  }

  #app {
    width: 768px;
    margin: auto;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
.slide-left-enter,
.slide-right-leave-to{
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave,
.slide-right-enter-to,
.slide-right-leave {
  transform: translateX(0);
}
.slide-left-leave-to,
.slide-right-enter{
  transform: translateX(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active{
  transition: all 0.1s linear;
}
</style>
